import 'package:flutter/material.dart';
import 'package:flutter_vant/main.dart';
import 'package:simulator/components/DemoView/index.dart';

@immutable
class Cell extends HookWidget {
  const Cell({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    List<Widget> renderList(List<Map> list) {
      return list.map((e) {
        return DemoView(
          title: e['title'],
          isGrid: false,
          children: (e['children'] as List).map((el) {
            return VanCellGroup(
              inset: e['inset'],
              title: el['parentTitle'],
              children: [
                VanCell(
                    size: el['size'],
                    title: el['title'],
                    value: el['value'],
                    label: el['label'],
                    icon: el['icon'],
                    isLink: el['isLink'],
                    arrowDirection: el['arrowDirection'],
                    center: el['center'],
                    slot: {
                      'title': el['titleSlot'],
                      'value': el['valueSlot'],
                    })
              ],
            );
          }).toList(),
        );
      }).toList();
    }

    renderMain() {
      final List<Map> data = [
        {
          "title": '基础用法',
          "children": [
            {"title": '单元格', "value": "内容"},
            {"title": "单元格", "value": "内容", "label": '描述信息'}
          ]
        },
        {
          "title": '卡片分割',
          "inset": true,
          "children": [
            {"title": '单元格', "value": "内容"},
            {"title": "单元格", "value": "内容", "label": '描述信息'}
          ]
        },
        {
          "title": '单元格大小',
          "children": [
            {"title": '单元格', "value": "内容", "size": "large"},
            {"title": "单元格", "value": "内容", "label": '描述信息', 'size': "large"}
          ]
        },
        {
          "title": '展示图标',
          "children": [
            {"title": '单元格', 'icon': Icons.location_on, 'value': '内容'},
          ]
        },
        {
          "title": '只设置value',
          "children": [
            {'value': '内容'},
          ]
        },
        {
          "title": '展示箭头',
          "children": [
            {"title": "单元格", "isLink": true},
            {"title": "单元格", "isLink": true, 'value': '内容'},
            {
              "title": "单元格",
              "isLink": true,
              'value': '内容',
              'arrowDirection': 'down'
            }
          ]
        },
        {
          "title": '分组标题',
          "children": [
            {'title': '单元格', "parentTitle": "分组1", "value": '内容'},
            {'title': '单元格', "parentTitle": "分组2", "value": '内容'},
          ]
        },
        {
          "title": '使用插槽',
          "children": [
            {
              "titleSlot": () {
                return Frame(
                  styles: const {CssRule.flexDirection: 'row'},
                  children: [TextView('单元格'), TextView('标签')],
                );
              },
              'value': '内容'
            },
            {
              'title': '单元格',
              "value": '内容',
              'icon': Icons.shop_two,
              'valueSlot': () {
                return const Icon(Icons.search);
              }
            },
          ]
        },
        {
          "title": '垂直居中',
          "children": [
            {"title": "单元格", "value": '内容', 'label': '描述信息', 'center': true},
          ]
        },
      ];
      return renderList(data);
    }

    return HookView(
        title: 'Cell',
        backgroundColor: 'rgb(247,248,250)',
        children: renderMain());
  }
}
